<template>
	<view>
		<view class="cart-input">
			<input class="ser-input" @click="search" v-model="value" type="text" value="niha" placeholder="请输入搜索关键词" disabled /> 
		<u-scroll-list>
		    <view v-for="(item, index) in active" :key="index" @click="acticaty(item,index)">
		        <image :class=" nav==index?'caty-gin':'caty-imcage'" :src="item.img"></image>
				<text :class="nav==index?'caty-tyuse':'caty-test'">{{item.name}}</text>
		    </view> 
		</u-scroll-list>
		</view>
		<!-- 空白页 -->
			  <Blank v-if="list.length == 0" isedit="暂无收获地址~~"></Blank>
		<!-- 商品列表 -->
		<view class="cate-liket" v-else>
			<view class="cate-rietyon" v-for="(item,index) in list" :key="index">
				<image class="cate-comig" :src="item.mainImages[0]" mode="" @click="sanpot(item)"></image>
				<span class="cate-conspan" >{{item.title}}</span>
				<view>
					<span class="caty-ide">￥{{item.minCostPrice}}</span>
					<!-- <van-icon class="caty-opint" size="18" name="shopping-cart-o" color="#fff"  @click="gouwu(item)"/> -->
					 <image class="caty-opint" src="@/static/temp/gouwuc.png" @click="gouwu(item)"></image>
					<van-icon class="caty-vant" size="21" color="#8a8a8a" name="star-o" v-if="list[index].favorites == false" @click="onClickcollect(item)"/>
					<van-icon class="caty-vant" size="21" color="#ff7144" name="star" v-else @click="cancelollect(item)"/>
					
				</view> 
				<view class="caty-act"> 
					{{item.holdUserName}}
					<van-icon class="caty-opitu" name="arrow"/>
				</view>
				<!-- 弹出框 -->
				<u-popup :show="show" mode="bottom" :duration="200" :closeable="true" :overlayOpacity="0.3" @close="close" @open="open">
				    <addition @onchange="onchange" :childata="childata"></addition>
				 </u-popup>
			</view>
			<!-- 购物车 -->
				<!-- <image class="caty-houwu" src="@/static/gouwu.png" @click="shopping"></image> -->
				<van-icon class="caty-houwu" name="shopping-cart-o" @click="shopping" size="24px" :info="act" color="#ff7144"/>
		</view>
		 <van-loading id="demo" class="actoue" v-show="siopen" size="21px" type="spinner">加载中...</van-loading>
	</view>
</template>

<script>
	import Api from '../../http/api.js'
	import roles from '@/http/roles.js'
	import addition from '@/package/commodity/components/addition.vue'
	import Blank from '@/package/components/blank.vue'
	export default{
		components:{ addition, Blank },
		data(){
			return{
				childata:{},
				show:false,
	           keyword:'',
				siopen:false,
				city:'',
				chateh:'',
				z:{
					index:1,
					size:100
				},
				act:'',
		    	q:{
				index:1,
				size:10,
				searchText:'',
				region:{
					province:'',
					city:'',
					county:''
				},
				categories:[
					{
						id:'',
						desc:'',
						level:1
					}
				],
			},
			x:{
				commodityId:'',
				specId:'',
				initSpecNumber:1
			},
			list:[],
			info:{
				commodityId:'',
				specId:'',
				specName:'',
				specPrice:'',
				specNumber:''
			},
			active:[],
			nav:'',
			infolevter:''
			}
		},
		onLoad(option){
			this.infolevter = option.type
			  let title = '生活家具'
		   if(option.type==='c2'){
				title = '品牌主材'
			}
			uni.setNavigationBarTitle({
				title
			})
			this.logcater()
			this.logac()
		},
		// 下拉刷新
		onPullDownRefresh(){
			this.loached();
		},
		//加载更多
		onReachBottom(){
		const that = this;
		this.siopen = true
		this.q.size = this.q.size+10
		console.log(this.q.size)
		setTimeout(async ()=>{
				
		let rec = await Api.merchandise(this.q)
		this.list = rec.data.data
		 that.siopen = false
		},1000)
		},
		methods:{
			// 获取分类列表
			async logcater(){
					const rrs = await roles.xclassify()
					rrs.data.forEach((item,index)=>{
						if(item.parentId == this.infolevter){ 
							this.active.push(item)
						}
					})
				      for(let i = 0;i<this.active.length;i++){
						  let j = JSON.parse(this.active[i].iconUrl)
						  this.active[i]["img"] = j[0].url
				     }
					this.q.categories[0].id = this.active[0].id
					this.q.categories[0].desc = this.active[0].name
					this.loached()
			           },
					   async loached(){
					         this.chateh = wx.getStorageSync('chateh')
					         this.city = wx.getStorageSync('city')
					   	  if(this.city != ''){
					   		  this.q.region = this.city
					   	  } else{
					   		  this.q.region = this.chateh
					   	  }
					   	const res = await Api.merchandise(this.q)
					   	this.list = res.data.data
					   },
			            // 购物车列表
						async logac(){
							let arr = []
							const ret = await Api.trolley(this.z)
							for(let i = 0; i < ret.data.length; i++){
								arr.push(ret.data[i].commodities.length)
							}
							let sum = 0
							arr.forEach(item =>{
							   sum = sum + item
							})
								this.act = sum
								
						},
						// 跳转购物车
						shopping(){
							uni.navigateTo({
								url:'/pages/cart/cart'
							})
						}, 
			         // 跳转商品详情
			         sanpot(item){
						   uni.navigateTo({
						   	url: `/pages/cart/loginest?id=`+item.commodityId,
						   })
			            },
						// 加入购物车
						async gouwu(item){
							// console.log(item)
							if(item.specs.length == 1){  
							this.x.commodityId = item.commodityId
							this.x.specId = item.specs[0].commoditySpecId
							const res = await Api.addshopping(this.x)
								if(res.code == 200){
									this.$api.msg('商品已添加至购物车');
								} else{
									this.$api.msg('添加失败请重新添加');
								}
								} else {
								  this.childata = item
				                  this.show = true
			                    }
							this.logac()
						},
						// 关闭弹窗
						close(){   
							this.show = false
						},
						async open(){
							  this.show = true
						 },
						 onchange(){
						 	this.show = false
						 },
						// 收藏
						async onClickcollect(item){
						    this.info.commodityId = item.commodityId
						    this.info.specId = item.specs[0].commoditySpecId
							this.info.specName = item.specs[0].name
							this.info.specPrice = item.specs[0].platformPrice
							const res = await Api.collection(this.info)
							this.loached();
						
						 },
						 // 取消收藏
						 async cancelollect(item){
							 const rect = await Api.canceltion({specId:item.specs[0].commoditySpecId,commodityId:item.commodityId})
							 this.loached();
						 },
						 // 搜索商品
						 search(){ 
						 	let actide = JSON.stringify(this.q.categories)
						 	uni.navigateTo({
						 		url:'/package/commodity/searchbox?classify='+ actide
						 	}) 
						 },
			// 切换分类
			acticaty(item,index){
				this.nav = index
				this.q.categories[0].id = item.id
				this.q.categories[0].desc = item.name
				 this.loached();
			}
			
		}
	}
</script>

<style lang="scss">
	// 商品搜索
	.cart-input{
		background: linear-gradient(180deg, #FECBA7 0%, rgba(255,243,235,0) 100%);
		padding-top: 20rpx !important;
	}
	.u-search{
		width: 90%;
		margin-left: 5% !important;
	}
	.u-search__content__input{
		background-color: #fcf8f5 !important;
	}
	.u-search__action{
		display: none;
	}
	// 顶部轮播分类
	.cart-input{
		background: linear-gradient(180deg, #FECBA7 0%, rgba(255,243,235,0) 100%);
		padding-top: 20rpx !important;
	}
	.caty-imcage{
	    width: 100rpx;
	    height: 100rpx;
	    margin-left: 40rpx;
	    border-radius: 20upx;
	    margin-top: 30rpx;
	}
	.caty-gin{
		width: 100rpx;
		height: 100rpx;
		margin-left: 40rpx;
		border-radius: 20upx;
		margin-top: 30rpx;
		border: 2px solid #ff7144;
	}
	.caty-test{
		display: inline-block;
		margin-left: 50rpx;
		color: #1d1d1d;
		font-size: 24rpx;
		font-weight: 500;
		width: 70%;
	}
	.caty-tyuse{
		display: inline-block;
		margin-left: 50rpx;
		color: #1d1d1d;
		font-size: 24rpx;
		font-weight: 700;
		width: 70%; 
	}
	.u-scroll-list__indicator{
		display: none !important;
	}
	// 商品列表
	// 商品列表
	.cate-liket{
		background-color:#f5f5f5;
		margin-top: 35rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 32upx;
		.cate-rietyon{
			width: 48%;
			height: auto;
			background-color: #FFFFFF;
			margin-bottom: 45upx;
			border-radius: 20rpx !important;
			padding-bottom: 10rpx;
		
		}
		.cate-comig{
			width: 100%;
			height: 350upx;
			border-top-left-radius:20rpx;
			border-top-right-radius:20rpx;
		}
		.caty-ide{
			color: #ff7144;
			margin-left: 20rpx;
			margin-bottom: 10rpx;
		}
		.cate-conspan{
			display: -webkit-box;
		
		    color: #1d1d1d;
			font-size: 24rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			margin-bottom: 10rpx;
			line-height: 28rpx;
			font-weight: 500;
			overflow:hidden;
			-webkit-line-clamp: 2; /* 能够显示的最大行数 */
		    -webkit-box-orient: vertical; 
		}
		.cate-image{
			height: 45rpx;
			width: 45rpx;
			border-radius: 50%;
		    margin-left: 20rpx;
		}
		.caty-opint{
			float: right;
			width: 45upx;
			height: 45upx;
			margin-right: 20upx;
		}
		.caty-vant{
			background-color: #f7f7f7;
		    float: right;
			width: 45upx;
			height: 45upx;
			border-radius: 50%;
			margin-right: 25upx;
		}
		.caty-act{
			background-color:#f7f7f7;
			height:30upx;
			font-size: 24upx;
			margin: 20upx;
			padding-left: 10upx;
			padding-right: 15upx;
			border-radius: 15upx;
		}
		.caty-opitu{
			float: right;
			transform: translateY(30%);
		}
		}
		.caty-houwu{
			position: fixed;
			right: 22rpx;
			bottom: 80rpx;
			width: 75upx;
			height: 75upx;
			background-color: #FFFFFF;
			border-radius: 50%;
		}
		// 加载
		.actoue{
			margin-left: 40%;
		}
		.ser-input{
				flex:1;
				height: 56upx;
				line-height: 56upx;
				width: 90%;
				margin-left: 30rpx;
				text-align: center;
				font-size: 28upx;
				color:$font-color-base;
				border-radius: 20px;
				background: rgba(255,255,255,.6);
		}
		// 弹出框
		.u-transition{
			height: 55% !important;
		}
		
		// 空白页
			.empty{
					
				overflow: none;
			
				width: 100%;
				height: 100vh;
				padding-bottom:100upx;
				display:flex;
				justify-content: center;
				flex-direction: column;
				align-items:center;
				background: #fff;
				image{
					width: 240upx;
					height: 160upx;
					margin-bottom:30upx;
				}
				.empty-tips{
					display:flex;
					font-size: $font-sm+2upx;
					color: $font-color-disabled;
					.navigator{
						color: $uni-color-primary;
						margin-left: 16upx;
					}
					}
					}
					
</style>